
<div class="has-border">
  <div class="item-grade2">
    <h3>得分统计</h3>

    <div class="table-wrapper">
      <table cellpadding="0" cellspacing="0">
        <tr>
          <td>因子</td>
          <% @expls[:dimens].keys.each do |key| %>
          <td><%= key %> </td>
          <% end %>
        </tr>
        <tr>
          <td>原始分</td>
          <% @expls[:dimens].keys.each do |key| %>
          <td><%= @expls[:dimens][key][:value] %></td>
          <% end %>
        </tr>
        <tr>
          <td>T分</td>
          <% @expls[:dimens].keys.each do |key| %>
          <td><%= @expls[:dimens][key][:t] %></td>
          <% end %>
        </tr>
      </table>

    </div>
  </div>

  <div class="item-grade2">
    <h3>人格因素分析</h3>

    <div id="chart0" style="width:300px;height:400px; float:left;">16PF人格剖面图</div>
  </div>

  <div class="item-grade2">
    <h3>人格特征</h3>

    <table>
      <% @expls[:dimens].keys.each do |key| %>
        <% if @expls[:dimens][key][:expl] != "no" %>
      <tr>
        <td width=""><%= key %>&nbsp;<%=@expls[:dimens][key][:expl]["解释"]%></td>

      </tr>
      <tr>
        <td><%= @expls[:dimens][key][:expl]["特征描述"] %></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      
        <% end %>
      <% end %>
    </table>

    <hr />

    <h3>次级人格特征</h3>
    <table>
      <% @expls[:dimens2].each do |e| %>
      <tr>
        <td><%= e[:name] %></td>
      </tr>
      <tr>
        <td height="40" style="padding-left:40px"><%= e[:expl] %></td>
      </tr>
      <% end %>
    </table>
  </div>
  
</div>

  <script>
    $(function () {


      function showChart(series) {

        var data = series;

        var markings = [
            { color: '#B2DF45', lineWidth: 2, xaxis: { from: -1, to:-1} },
            { color: '#B2DF45',lineWidth: 2, xaxis: { from:1, to: 1 } }
        ];
        var i = 16;
        var j = 16;
        var options = {
          //bars: {show: true, barWidth: 0.5, fill: 0.9,horizontal:true, align:'center'},
          points: {show: true},
          lines: {show: true},
          xaxis: {
            //tickDecimals: 0,
            //tickSize: 1 ,
            ticks: [[-4.5, "1"],[-3.5, "2"],[-2.5, "3"],[-1.5, "4"],
               [-0.5, "5"], [0.5, "6"], [1.5, "7"], [2.5, "8"], [3.5, "9"], [4.5, "10"]]
          },
          yaxis:{
            ticks: [[i--, "A"],[i--, "B"], [i--, "C"], [i--, "E"], [i--, "F"], [i--, "G"],
                    [i--, "H"], [i--, "I"] ,[i--, "L"], [i--, "M"], [i--, "N"], [i--, "O"],
                    [i--, "Q1"], [i--, "Q2"], [i--, "Q3"], [i--, "Q4"]]
          },
          y2axis: {
            ticks: [[j--, "A"],[j--, "B"], [j--, "C"], [j--, "E"], [j--, "F"], [j--, "G"],
              [j--, "H"], [j--, "I"] ,[j--, "L"], [j--, "M"], [j--, "n"], [j--, "O"],
              [j--, "Q1"], [j--, "Q2"], [j--, "Q3"], [j--, "Q4"]]
          },
          grid: { markings: markings }
        };
        //绘制图表
        $.plot($("#chart0"), data, options);
      }

      //$.ajax({
        //  url: "/data-eu-gdp-growth.json",
          //method: 'GET',
          //dataType: 'json',
          ///success: showChart
      //});
      showChart(<%=@expls[:json]%>);

    });
  </script>
